<template>
	<view class="order-detail">
		<u-gap height="30rpx"></u-gap>
		<view class="dy-card" style="display: flex; flex-direction: column; align-items: center;">
			<u--text :size="17" :text="`订单状态：${orderStateText}`" type="error"></u--text>
			<u--text :size="17" :text="`下单时间: ${orderInfo.createTime}`" type="error" margin="20rpx 0 0"></u--text>
		</view>
		<u-gap height="30rpx"></u-gap>
		<view class="order-detail-goods dy-card">
			<img :src="goodsInfo.dyGoodsImages || '/static/image/goodImg.jpg'" style="width: 250rpx;" mode="widthFix"
				alt="" srcset="" />
			<view class=""
				style="margin-left: 20rpx; display: flex; flex-direction: column; justify-content: space-between;">
				<u--text :text="goodsInfo.goodsName" size="22" class="theme-font" margin="15rpx 25rpx 25rpx"></u--text>
				<dy-price :current-price="goodsInfo.price" :original-price="goodsInfo.purchasePrice"></dy-price>
			</view>
		</view>
		<u-gap height="30rpx"></u-gap>
		<view class="order-detail-send address-card">
			<view class="send-icon">
				取
			</view>
			<view class="address-detail">
				<u--text :text="addressText1('send')" size="16" align="center" class="u-flex-y-center"></u--text>
				<u--text v-if="addressText2('send')" type="info" margin="8rpx 0 0 0" :text="addressText2('send')"
					size="14" align="center"></u--text>
			</view>
		</view>
		<u-gap height="30rpx"></u-gap>
		<view class="order-detail-send address-card">
			<view class="back-icon">
				送
			</view>
			<view class="address-detail">
				<u--text :text="addressText1('back')" size="16" align="center" class="u-flex-y-center"></u--text>
				<u--text v-if="addressText2('back')" type="info" margin="8rpx 0 0 0" :text="addressText2('back')"
					size="14"></u--text>
			</view>
		</view>
		<u-gap height="30rpx"></u-gap>

		<view class="dy-card">
			<view class="dy-card-row" @click="showTimePicker = true">
				<view class="primary-text">
					预约取件时间
				</view>
				<view class="" style="font-size: 30rpx;">{{takeTime}}</view>

			</view>
		</view>
		<u-gap height="30rpx"></u-gap>
		<view class="dy-card" v-if="note">
			<view class="">
				<textarea :value="note" placeholder="请输入备注" name="" id="" cols="30" rows="5"></textarea>
			</view>
		</view>
		<!-- <u-gap height="10rpx"></u-gap> -->
		<!-- <dy-phone-card></dy-phone-card> -->
		<ImButton />
		<u-gap height="30rpx"></u-gap>
		<view class="dy-card u-flex u-flex-start footer-card" :style="bottomBarStyle" v-if="goodsInfo.dyItemId">
			<!-- 			<u-button v-if="orderInfo.orderState == 1" @click="cancelHandle" :plain="true" text="取消订单"
				style="margin-right: 20rpx;"></u-button> -->
			<u-button v-if="orderInfo.orderState == 1" type="error" @click="continuePayHandle" :plain="true"
				text="继续支付"></u-button>
			<u-button v-if="orderInfo.orderState == 2" @click="refundHandle" :plain="true" text="退款"></u-button>
		</view>
	</view>
</template>

<script>
	import ImButton from '@/components/im-button/im-button.vue'
	
	export default {
		data() {
			return {
				orderId: '',
				mallOrderId: '',
				orderState: '',
				refundState: '',
				dateIndex: [0, 0],
				sendAddress: {
					userName: '',
					telNumber: '',
				},
				note: '',
				backAddress: {
					userName: '',
					telNumber: '',
				},
				addressType: 'send',
				showTimePicker: false,
				selectDate: null,
				orderInfo: {},
				goodsInfo: {},
				takeTime: '',
			}
		},
		components: {
			ImButton
		},
		computed: {
			bottomBarStyle() {
				const styleObj = {
					bottom: this.systemInfo.safeAreaInsets.bottom + 'px'
				}
				return uni.$u.addStyle(styleObj, 'string')
			},
			addressData() {
				return (type) => type == 'send' ? this.sendAddress : this.backAddress
			},
			addressText1() {
				return (type) => {
					const {
						userName,
						telNumber
					} = this.addressData(type)
					if (!userName) {
						return '请选择地址'
					}
					return `${userName} - ${telNumber}`
				}
			},
			addressText2() {
				return (type) => {
					const {
						provinceName,
						cityName,
						countyName,
						detailInfo
					} = this.addressData(type)
					if (!provinceName) {
						return ''
					}
					return `${provinceName}${cityName}${countyName}${detailInfo}`
				}
			},
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.mallOrderId = options.mallOrderId
			console.log(options)
		},
		onShow() {
			this.loadDetail()
		},
		methods: {
			refundHandle() {
				uni.navigateTo({
					url: '/pages/order/detail/refund?mallOrderId=' + this.mallOrderId
				})
			},
			loadGoodsDetail() {
				this.$u.api['goods/findGoodsDetail']({
					goodsMallId: this.orderInfo.goodsId
				}).then(res => {
					this.goodsInfo = res.data.data.goodsMall
					console.log(this.goodsInfo)
				})
			},
			loadDetail() {
				this.$u.api['order/getOrderMallById']({
					mallOrderId: this.mallOrderId
				}).then(res => {
					this.orderInfo = res.data.data.orderMall
					this.backAddress = {
						detailInfo: this.orderInfo.backAddress,
						cityName: this.orderInfo.backCity,
						countyName: this.orderInfo.backCounty,
						userName: this.orderInfo.backMan,
						telNumber: this.orderInfo.backPhone,
						provinceName: this.orderInfo.backProvince,
					}

					this.sendAddress = {
						detailInfo: this.orderInfo.takeAddress,
						cityName: this.orderInfo.takeCity,
						countyName: this.orderInfo.takeCounty,
						userName: this.orderInfo.takeMan,
						telNumber: this.orderInfo.takePhone,
						provinceName: this.orderInfo.takeProvince,
					}
					const endTime = this.orderInfo.takePreTimeEnd && this.orderInfo.takePreTimeEnd.split(' ')[1]
					this.takeTime = `${this.orderInfo.takePreTimeStart}~${endTime}`
					this.orderState = this.orderInfo.orderState
					this.refundState = this.orderInfo.refundState
					this.loadGoodsDetail()
				})
			},
			bindPickerChange(val) {
				this.dateIndex = val.detail.value
			},

			checkParams() {
				let errMsg = ''
				if (this.dateIndex.length < 2) {
					errMsg = '请选择预约时间'
				}
				if (this.addressText2('back')) {
					errMsg = '请选择送回地址'
				}
				if (this.addressText2('send')) {
					errMsg = '请选择取衣地址'
				}
				if (errMsg) {
					uni.showToast({
						title: errMsg
					})
					return false
				} else {
					return true
				}

			},
			formatDate(date) {
				const year = date.getFullYear();
				const month = ('0' + (date.getMonth() + 1)).slice(-2);
				const day = ('0' + date.getDate()).slice(-2);
				return `${year}-${month}-${day}`;
			},

			continuePayHandle() {
				tt.continueToPay({
					outOrderNo: this.mallOrderId,
					success: (res) => {
						console.log('success', res)
					},
					fail: (err) => {
						console.log('fail', err)
					},
					complete: (res) => {
						console.log('complete', res)
						this.loadDetail()
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-detail {
		overflow-y: auto;
	}

	.footer-card {
		margin-bottom: 70rpx;
		padding: 34rpx;
	}
</style>